<template>
  <div ref="mapContainer" class="map-container"></div>
</template>

<script>
import * as echarts from 'echarts';
import taiyuanMap from '../../../assets/maps/tiayuan.json'; // 假设GeoJSON数据保存在assets/maps目录下

export default {
  name: 'TaiyuanMap',
  data() {
    return {
      myChart: null,
      areaId: '', // 太原市的adcode

    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.myChart = echarts.init(this.$refs.mapContainer);
      // 注册太原市地图
      echarts.registerMap('taiyuan', taiyuanMap);
      // 配置地图选项
      const option = {
        geo: {
          map: 'taiyuan',
          roam: true, // 启用缩放和平移
          label: {
            show: true,
          },
          itemStyle: {
            normal: {
              areaColor: '#f0f8ff',
              borderColor: '#d3d3d3'
            },
            emphasis: {
              areaColor: '#add8e6'
            }
          }
        },
        series: [{
          name: '太原市',
          type: 'scatter',
          coordinateSystem: 'geo',
          data: [], // 可以在这里添加散点数据
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              show: false
            },
            emphasis: {
              show: true
            }
          },
          itemStyle: {
            normal: {
              color: '#ddb926'
            }
          },
        }]
      };

      // 设置地图选项
      this.myChart.setOption(option);
      this.myChart.on('click', this.handleMapClick);
    },
    handleMapClick(params) {
      taiyuanMap.features.forEach(item => {
        if (item.properties.name === params.name) {
          this.areaId = item.properties.areaId
          console.log(this.areaId)
          this.$emit('mapClick', this.areaId,params.name);
        }
      })
    },
  }
};
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 450px;
}
</style>